<script setup lang="ts">
import { computed, reactive, ref } from 'vue';
import { message } from 'ant-design-vue';
import { $t } from '@/locales';
import { loginModuleRecord } from '@/constants/app';
import { useRouterPush } from '@/hooks/common/router';
import { useAntdForm, useFormRules } from '@/hooks/common/form';
import { useAuthStore } from '@/store/modules/auth';
import { localStg } from '@/utils/storage';

defineOptions({
  name: 'PwdLogin'
});

const authStore = useAuthStore();
const { toggleLoginModule } = useRouterPush();
const { formRef, validate } = useAntdForm();

interface FormModel {
  userName: string;
  password: string;
  rememberMe: boolean;
}

const model: FormModel = reactive({
  userName: localStg.get('rememberedUserName') || '',
  password: '',
  rememberMe: localStg.get('rememberMe') === '1'
});

const password = ref(null);

const rules = computed<Record<keyof FormModel, App.Global.FormRule[]>>(() => {
  // inside computed to make locale reactive, if not apply i18n, you can define it without computed
  const { formRules, createRequiredRule } = useFormRules();

  return {
    userName: formRules.userName,
    password: createRequiredRule('请输入密码!')
  };
});

const passwordType = ref<any>('text');

function passwordChange() {
  passwordType.value = 'password';
}

async function handleSubmit() {
  await validate();

  // 保存记住我状态和用户名
  if (model.rememberMe) {
    localStg.set('rememberedUserName', model.userName);
    localStg.set('rememberMe', '1');
  } else {
    localStg.remove('rememberedUserName');
    localStg.remove('rememberMe');
  }

  await authStore.login(model.userName, model.password);
}

function formSubmit(e) {
  e.preventDefault();
}
</script>

<template>
  <AForm ref="formRef" :model="model" :rules="rules" class="login-form" @submit="formSubmit">
    <AFormItem name="userName" :label-col="{ span: 24 }" :wrapper-col="{ span: 24 }">
      <AInput v-model:value="model.userName" size="large" placeholder="请输入账号" autocomplete="off">
        <template #prefix>
          <icon-ic-round-person class="text-16px text-blue-500" />
        </template>
      </AInput>
    </AFormItem>
    <AFormItem name="password" :label-col="{ span: 24 }" :wrapper-col="{ span: 24 }" class="mt-20px">
      <AInput
        v-model:value="model.password"
        :type="passwordType"
        size="large"
        placeholder="请输入密码"
        autocomplete="off"
        @focus="passwordChange"
        @keypress.enter="handleSubmit"
      >
        <template #prefix>
          <icon-ic-round-lock class="text-16px text-blue-500" />
        </template>
      </AInput>
    </AFormItem>
    <ASpace direction="vertical" size="large" class="w-full mt-20px">
      <div class="flex-y-center justify-between">
        <ACheckbox v-model:checked="model.rememberMe">
          <span class="text-14px text-gray-600">记住我</span>
        </ACheckbox>
        <!-- <AButton type="link" @click="toggleLoginModule('reset-pwd')" class="text-blue-500">忘记密码?</AButton> -->
      </div>
      <AButton
        type="primary"
        block
        size="large"
        shape="round"
        :loading="authStore.loginLoading"
        @click="handleSubmit"
        class="font-bold"
      >
        登 录
      </AButton>
      <!-- <div class="flex-y-center justify-between mt-20px">
        <AButton class="h-36px flex-1" block @click="toggleLoginModule('code-login')">
          {{ $t(loginModuleRecord['code-login']) }}
        </AButton>
        <div class="w-12px"></div>
        <AButton class="h-36px flex-1" block @click="toggleLoginModule('register')">
          {{ $t(loginModuleRecord.register) }}
        </AButton>
      </div> -->
    </ASpace>
  </AForm>
</template>

<style lang="scss" scoped>
.login-form {
  :deep(.ant-form-item) {
    .ant-row {
      .ant-col {
        .ant-form-item-label {
          padding: 0;
        }

        .ant-form-item-required {
          &::before {
            display: none;
          }
        }
      }
    }
  }

  :deep(.ant-input-affix-wrapper) {
    .ant-input-prefix {
      margin-right: 10px;
    }

    input {
      font-size: 14px;
      padding: 8px 12px;
    }
  }

  :deep(.ant-btn) {
    font-size: 14px;
  }
}
</style>
